<template>
	<view class="Index">
		<u-search placeholder="搜索您喜欢的" v-model="keyword" shape="square" :showAction="false"
		 @search="doSearch"
		 @clickIcon="doSearch"
		 ></u-search>
		<view class="tabs-box">
			<u-tabs :list="typeList" 
				@click="clickType" 
				lineColor="#f31d41" 
				lineWidth="30" 
				:scrollable="false"
				:current="typeCurrent"
				:activeStyle="{color: '#f31d41'}">
			</u-tabs>
		</view>
		<view class="tags-box">
			<u-tag :text="item.name" v-for="(item, index) in tagList" :key="index"
			 :bgColor="item.bgColor"
		     :borderColor="item.bgColor" 
			 :color="item.color" 
			 :plain="item.plain || false"
			 @click="clickTag(index)">
		    </u-tag>
		</view>
		<view class="flex_box flex_between mt20">
			<view class="typetitle">推荐</view>
			<view class="typetitle" @click="goMore">查看更多</view>
		</view>
		<view class="mt20 flex_box gap10 goods-list">
			<view class="item" v-for="(item, index) in cateGoodsList">
				<view class="image-box">
					<u-image src="/static/test/photo1.png" width="218rpx" height="350rpx"></u-image>
					<text class="goods-type">翻页</text>
				</view>
				<view class="name mt10">宝宝满月酒</view>
				<view class="flex_box flex_between mt10">
					<text class="money">￥19.89</text>
					<text class="tu">13图</text>
				</view>
			</view>
		</view>
		<view class="flex_box flex_between mt20">
			<view class="typetitle">婚礼喜帖</view>
			<view class="typetitle">查看更多</view>
		</view>
		<view class="mt20 flex_box gap10 goods-list">
			<view class="item" v-for="(item, index) in cateGoodsList">
				<view class="image-box">
					<u-image src="/static/test/photo1.png" width="218rpx" height="350rpx"></u-image>
					<text class="goods-type">翻页</text>
				</view>
				<view class="name mt10">宝宝满月酒</view>
				<view class="flex_box flex_between mt10">
					<text class="money">￥19.89</text>
					<text class="tu">13图</text>
				</view>
			</view>
		</view>
		<view class="flex_box flex_between mt20">
			<view class="typetitle">乔迁请柬</view>
			<view class="typetitle" @click="goMore">查看更多</view>
		</view>
		<view class="mt20 flex_box gap10 goods-list">
			<view class="item" v-for="(item, index) in cateGoodsList">
				<view class="image-box">
					<u-image src="/static/test/photo1.png" width="218rpx" height="350rpx"></u-image>
					<text class="goods-type">翻页</text>
				</view>
				<view class="name mt10">宝宝满月酒</view>
				<view class="flex_box flex_between mt10">
					<text class="money">￥19.89</text>
					<text class="tu">13图</text>
				</view>
			</view>
		</view>
		<view class="make" @click="goMake">
			<u-image src="/static/make.png" width="200rpx" height="120rpx"/>
		</view>
	</view>
</template>

<script>
	let that;
	export default {
		data() {
			return {
				keyword: '', 
				typeList: [{name: '推荐', id:1}, {name: 'H5', id: 2}, {name: '图片', id: 3}],
				typeCurrent: 0,
				tagList: [
					{id: 0, name: '全部分类', bgColor: 'rgba(243, 29, 65, .05)', color:'#f31d41'}, 
					{id: 1, name: '升学宴', bgColor: '#fff', color:'#666'},
					{id: 2, name: '宝宝宴', bgColor: '#fff', color:'#666'}, 
					{id: 3, name: '寿宴请帖', bgColor: '#fff', color:'#666'},
					{id: 4, name: '生日祝福', bgColor: '#fff', color:'#666'},
					{id: 5, name: '婚礼喜帖', bgColor: '#fff', color:'#666'},
					{id: 6, name: '乔迁请柬', bgColor: '#fff', color:'#666'},
					{id: 7, name: '商务活动', bgColor: '#fff', color:'#666'},
				],
				cateGoodsList: [
					{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},
				]
			}
		},
		onLoad() {
			that = this;
		},
		methods: {
			clickType: (e) => {
				that.typeCurrent = e.index;
				console.log('current', that.typeCurrent)
			},
			clickTag: (idx) => {
				that.tagList.map((item, index) => {
					item.color   = index === idx ? '#f31d41' : '#666';
					item.bgColor = index === idx ? 'rgba(243, 29, 65, .05)' : '#fff';
					item.plain   = index === idx ? true : false;
				})
			},
			goMore: () => {
				uni.switchTab({
					'url': '/pages/template/template'
				})
			},
			doSearch: () => {
				console.log('do search')
			},
			goMake: () => {
				uni.navigateTo({
					url: '/pages/design/design'
				})
			}
		}
	}
</script>
<style lang="scss">
	.Index {
		padding: 0 20rpx;
		.tabs-box {
			margin-top:30rpx;
		}
	    .tags-box {
			display: flex;
			gap: 10rpx;
			margin-top: 20rpx;
			overflow: auto;
		}
		.typetitle {
			color: rgb(0, 0, 0);
			font-weight: bold;
			font-size: 30rpx;
		}
		.goods-list {
			overflow-x: auto;
			overflow-y: hidden;
			.money {
				font-size: 20rpx;
				color: rgb(211, 157, 6);
				background: rgba(229, 169, 0, 0.24);
				border-radius: 4px;
				padding: 3px;
				text-align: center;
			}
			.image-box {
				position: relative;
				.goods-type {
					font-size: 20rpx;
					position: absolute;
					right: 8rpx;
					bottom: 8rpx;
					background: rgba(0, 0, 0, 0.65);
					color: rgb(255, 255, 255);
					padding: 4rpx 6rpx;
					border-radius: 4rpx;
				}
			}
		}
		.tu {
			font-size: 11px;
			display: inline-block;
			color: rgb(161, 161, 161);
		}
		.name {
			display: block;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 26rpx;
		}
		.make {
			position: fixed;
			left: 0;
			bottom: 100rpx;
		}
	}
</style>
